<template>
  <div class="equipment_main max">
    <my-header :backBtn="true">
			<div slot="title">
				设备详情
			</div>
		</my-header>
    <div class="cont-nof">
      <div class="weui-cells">
        <div class="weui-cell">
          <div class="weui-cell__bd tl eq_0">
            <p>设备名称</p>
          </div>
          <div class="weui-cell__ft tr eq_1">{{device.deviceName}}</div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__bd tl eq_0">
            <p>喷雾液总量</p>
          </div>
          <div class="weui-cell__ft tr eq_1">{{device.totalSoap}}</div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__bd tl eq_0">
            <p>喷雾液余量</p>
          </div>
          <div class="weui-cell__ft tr eq_1" :class="device.threshold>device.residueSoap?'warning':''">{{device.residueSoap}}</div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__bd tl eq_0">
            <p>预警阀值</p>
          </div>
          <div class="weui-cell__ft tr eq_1">{{device.threshold}}</div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__bd tl eq_0">
            <p>考勤功能</p>
          </div>
          <div class="weui-cell__ft tr eq_1">
            <input class="weui-switch" type="checkbox" @change="isCheck"
                                                    v-model="device.attendance"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        device: {
          id: '',
          deviceName: '',
          residueSoap: '',
          totalSoap: '',
          threshold: '',
          attendance:false,
        }
      }
    },
    methods: {
      isCheck() {
        this.$http.updateDevice(this.device).then(resp=>{
          this.$weui.toast(resp.msg);
        })
      },
    },
    created() {
      this.device=this.$route.query;
    },
    mounted() {
    }
  }
</script>

<style>
  .warning{
    color: orange;
  }
</style>
